<template>
  <Modal v-model="modal" @on-visible-change="onClose" :title="title">
    <div class="has-choice">
      <div class="mb">
        <Select 
          v-model="value" 
          @on-change="onSelectAreaList">
          <Option v-for="(item, index) of select_list" :value="item.id" :key="index">{{item.company_name}}</Option>
        </Select>
      </div>
      <ul v-if="listData && listData.length">
        <li v-for="(todo, index) of listData" :key="index">
          <div class="left">
            <div class="name">{{todo.company_name}}</div>
            <div>地址：{{todo.address}}</div>
          </div>
          <div class="right">
            <Button v-if="todo.is_invite == 0" type="primary" @click="onJoinCompany(todo)" shape="circle">派单</Button>
            <Button v-else type="text" shape="circle" @click="onJoinCompany(todo)">取消派单</Button>
          </div>
        </li>
      </ul>
      <div v-else>暂无数据</div>
    </div>
    <div slot="footer" align="right">
      <Button type="default" @click="cancel">关闭</Button>
    </div>
    <JoinCompanyitem ref="join" @complete="getData" ></JoinCompanyitem>
    <Loader :status="status" @refresh="getData"></Loader>
  </Modal>
</template>
<script >
import JoinCompanyitem from './JoinCompanyitem'
export default {
    components: {
      JoinCompanyitem
    },
    data(){
      return {
        title: '公司列表',
        modal: false,
        listData: null,
        status: 'pass',
        order_id: '',
        list: {
          0: "个人",
          1: "设计师",
          2: "制版师",
          3: "制样师"
        },
        select_list: []
      }
    },
    created() {
    },
    methods:{
      onSelectAreaList(id) {
        // 拿出里面的数据
        let selectData = this.select_list.find(item => item.id == id)
        let defaultData = this.listData.filter(item => item.id == id)
        console.log(defaultData)
        console.log(id)
        if (!defaultData.length) {
          this.listData.push(selectData)
        }
      },
      getData() {
        this.status = 'loading'
        this.$ajaxGet('/order/sendCompanyList', {order_id: this.order_id}).then(res => {
          this.status = 'pass'
          this.listData = res.default_list.map(item =>  {
            return {
              company_name: item.company_name,
              is_invite: item.is_invite,
              id: item.id,
              address: item.address
            }
          })
          this.select_list = res.select_list
        })
      },
      open (item) {
        this.modal = true
        this.order_id = item.order_id
        this.getData()
      },
      cancel () {
        this.modal = false
      },
      onClose(res) {
        if (!res) sessionStorage.setItem('query_order', '')
      },
      onJoinCompany (item) {
        // this.$refs.join.updataForm(item.id)
        let url =  '/order/cancelSend' // 派单
        if (item.is_invite == 0) url = '/order/orderSend'
        this.$Modal.confirm({
          title: '提示',
          content: '确定要派单吗？',
          onOk: () => {
            let data = {
              order_id: this.order_id,
              company_id: item.id
            }
            this.status = 'loading'
            let ll = '取消派单'
            if (item.is_invite == 0) ll = '派单'
            this.$jsonPost(url, data).then(() => {
              this.status = 'pass'
              this.$Notice.success({
                title: `${ll}成功`,
                desc: `<span class='font-red'>${item.name}</span> 已${ll}。`
              })
              this.getData()
            }).catch(res => {
              this.status = 'pass'
            })
          }
          })
      }
    }
}
</script>
<style scoped>
.tag-modal{
    text-align: center;
}
</style>
